import React from 'react';
import dayjs from 'dayjs';
import { convertTo24Hour } from '@/utils/time';
import { Tooltip } from '@arco-design/web-react';

export function getColumns(
  t: unknown,
  lang: string,
  tableColumns: Array<unknown>
) {
  const columns = [
    {
      title: '#',
      dataIndex: 'id',
      width: 60,
    },
    {
      title: t['searchTable.columns.fullName'],
      dataIndex: 'fullName',
      width: 160,
      render: (a: string) => (a ? a : '--'),
    },
    {
      title: t['searchTable.columns.complainant'],
      dataIndex: 'applicantType',
      width: 200,
      render: (a: any): JSX.Element => {
        return (
          <Tooltip content={a?.value[lang === 'en-US' ? 'en' : 'ar']}>
            <div className="ellipsis">
              {a?.value[lang === 'en-US' ? 'en' : 'ar'] ?? '--'}
            </div>
          </Tooltip>
        );
      },
    },
    {
      title: t['searchTable.columns.email'],
      dataIndex: 'email',
      width: 200,
      render: (a: string) => (a ? a : '--'),
    },
    {
      title: t['searchTable.columns.mobile'],
      dataIndex: 'mobile',
      width: 150,
      render: (a: string) => (a ? a : '--'),
    },
    {
      title: t['searchTable.columns.created'],
      dataIndex: 'createdAt',
      width: 200,
      render: (x: string | number | Date | dayjs.Dayjs) => (
        <div className="ltr-ipt">{x ? x : '--'}</div>
      ),
      sorter: true,
    },
    {
      title: t['searchTable.columns.violation'],
      dataIndex: 'expiredAt',
      width: 220,
      render: (x: string | number | Date | dayjs.Dayjs) => (
        <div className="ltr-ipt">{x ? x : '--'}</div>
      ),
      // sorter: (a: { expiredAt: any }, b: { expiredAt: any }) => {
      //   return dayjs(b.expiredAt).valueOf() - dayjs(a.expiredAt).valueOf();
      // },
      sorter: true,
    },
  ];

  return [...columns.filter((a) => tableColumns.includes(a.dataIndex))];
}
